<html>

<head>
    <meta charset="utf-8">
    <title>登录</title>
    <script src="../js/vue.js"></script>
    <script src="../js/element.js"></script>
    <script src="../js/axios.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/element.css" />
    <link rel="stylesheet" type="text/css" href="../css/login.css" />
	<link rel="icon" href="images/logo.png">
</head>

<body>
    <div id="app">
        <div class="bg">
            <div class="title">
                <h1>音小悦后台管理系统</h1>
            </div>
            <div class="bg-shadow">
                <div class="form">
                    <div class="form-div">
                        <div class="form-title">
                            <h2>登录</h2>
                        </div>
                        <div class="hr"></div>
                        <div class="form-input">
                            <form action="" :model="form">
                                <div class="inputBox">
                                    <input type="text" name="username" v-model="form.username"  required>
                                    <span class="div"><i class="el-icon-s-custom"></i>&nbsp;账&nbsp;&nbsp;号</span>
                                </div>
                                <div class="inputBox">
                                    <input type="password" name="password" v-model="form.password" required>
                                    <span class="div"><i class="el-icon-lock"></i>&nbsp;密&nbsp;&nbsp;码</span>
                                </div>
                                <div class="inputBox">
                                    <input type="text" name="verifyCode" v-model="form.verifyCode" required>
                                    <span class="div"><i class="el-icon-lock"></i>&nbsp;验证码</span>
                                </div>
                                <div class="verifyCodeDiv">
                                    <image @click="changeVerifyCode()" id="verifyCodeImage" class="verifyCodeImage"></image>
                                    <div type="button" class="verifyCodeButton" @click="changeVerifyCode()"><span class="span">换一张</span></div>
                                </div>
                                <div class="form-button" @click="onSubmit">
                                    LOGIN
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data() {
            return {
                form: {
                    username: 'pony',
                    password: '123456',
                    verifyCode: ''
                }
            }
        },
        mounted() { // 生命周期函数
            var img = document.getElementById("verifyCodeImage");
            // 未登录，返回登录页面
            img.src = "http://127.0.0.1:8080/employee/getVerifyCode"
        },
        methods: {
			// 登录
            onSubmit() {
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/employee/login/' + this.form.verifyCode,
                    data: {
                        username: this.form.username.trim(),
                        password: this.form.password.trim()
                    }
                }).then(res => {
					//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
					if (res.data != undefined && res.data.code == 200) {
						console.log(res.data)
						// 在本地缓存中保存登录状态
						localStorage.setItem("token", res.data.data.token)
						//转向
						location.href = 'index.html'
					}else{//登陆失败
					    this.$message.error(res.data.message)
					}
				})		
            },
			// 刷新验证码图片
            changeVerifyCode() {
                var img = document.getElementById("verifyCodeImage");
                var timenow = new Date().getTime();
                img.src = "http://127.0.0.1:8080/employee/getVerifyCode?d=" + timenow
            }
        }
    })
</script>

</html>